<template>
  <Suspense v-if="router.currentRoute.value.fullPath != '/video'">
    <el-affix :offset="0">
      <headerComp :language="data.language" @languageChange="languageChange"></headerComp>
    </el-affix>
  </Suspense>

  <div class="bg">
    <Suspense>
      <el-config-provider :locale="zhCn">
        <router-view v-slot="{ Component }" v-if="isRouteActive">
          <keep-alive include="showroom,about,Home,Ecology">
            <component :is="Component"></component>
          </keep-alive>
        </router-view>
      </el-config-provider>
    </Suspense>
  </div>
  <Suspense v-if="router.currentRoute.value.fullPath != '/video'">
    <footerComp :language="data.language"></footerComp>
  </Suspense>

  <Suspense v-if="router.currentRoute.value.fullPath != '/video'">
    <rightComp></rightComp>
  </Suspense>

  <Suspense v-if="router.currentRoute.value.fullPath != '/video'">
    <contactPopup ref="contactPopupRef"></contactPopup>
  </Suspense>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, provide, nextTick, inject, reactive, watch } from "vue";
import { getUserId } from "@/network/apiKaiqiton";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { useRouter } from 'vue-router';


const translate = inject("translate") as any;

const isRouteActive = ref(true);
provide("reload", () => {
  isRouteActive.value = false;
  nextTick(() => {
    isRouteActive.value = true;
  });
});

const data = reactive({
  language: "chinese_simplified",
});
data.language = sessionStorage.getItem("language") || "chinese_simplified";

console.log('data.language', data.language);


const contactPopupRef = ref();

provide("open", () => {
  contactPopupRef.value.handleOpen();
});

const languageChange = (val: string) => {
  data.language = val;
  translate.changeLanguage(val);
};

const getUserIds = () => {
  getUserId({
    mobile: 13418624365,
    name: "李虎",
    company: "测试公司",
  }).then((res: any) => {

    if (res.data.token) {
      sessionStorage.setItem("token", res.data.token);
      sessionStorage.setItem("user_id", res.data.user_id);
    }
  });
};
getUserIds();
let router = useRouter()
watch(
  () => router,
  (newValue, oldValue) => {
    console.log(newValue.currentRoute.value.fullPath, 'asdasdgjagsd');
  },
  { deep: true }
);
const headerComp = defineAsyncComponent(() => import("@/components/header.vue"));
const footerComp = defineAsyncComponent(() => import("@/components/footer.vue"));
const rightComp = defineAsyncComponent(() => import("@/components/right.vue"));
const contactPopup = defineAsyncComponent(() => import("@/components/contactPopup.vue"));
</script>

<style lang="scss">
.el-popup-parent--hidden {
  width: 100% !important;
  padding-right: 0px !important;
}

.bg {
  background: #f5f5f7ff;
}

.swiper-slide {
  margin-top: 0px !important;
}

.el-button--large.is-round {
  padding: 20px 36px !important;
}
</style>
